<script setup lang="ts">
import { ref, onMounted  } from 'vue'
const btn = ref(null)
const btn2 = ref(null)
const btn3 = ref(null)
const output = ref(null)
var copyText = function (button, content, success) {
  if (!button) {
    return
  }

  if (typeof content == 'function') {
    success = content
    content = null
  }

  success = success || function () {}

  // 是否降级使用
  var isFallback = !navigator.clipboard

  if (typeof button == 'string' && !content) {
    if (content === false) {
      isFallback = true
    }
    content = button
    button = null
  }

  var eleTextarea = document.querySelector('#tempTextarea')
  if (!eleTextarea && isFallback) {
    eleTextarea = document.createElement('textarea')
    eleTextarea.style.width = 0
    eleTextarea.style.position = 'fixed'
    eleTextarea.style.left = '-999px'
    eleTextarea.style.top = '10px'
    eleTextarea.setAttribute('readonly', 'readonly')
    document.body.appendChild(eleTextarea)
  }

  var funCopy = function (text, callback) {
    callback = callback || function () {}

    if (!isFallback) {
      navigator.clipboard.writeText(text).then(function () {
        callback()
        // 成功回调
        success(text)
      }, function() {
        // 禁止写入剪切板后使用兜底方法
        copyText(null, text, false)
        callback()
        // 成功回调
        success(text)
      })

      return
    }

    eleTextarea.value = text
    eleTextarea.select()
    document.execCommand('copy', true)

    callback()
    // 成功回调
    success(text)
  };

  if (!button) {
    funCopy(content)
    return
  }

  // 事件绑定
  button.addEventListener('click', function (event) {
    var strCopy = content
    if (content && content.tagName) {
      strCopy = content.textContent || content.value
    }
    // 复制的文字内容
    if (!strCopy) {
      return
    }

    funCopy(strCopy, function () {
      // 复制成功提示
      var eleTips = document.createElement('span')
      eleTips.className = 'text-popup'
      eleTips.innerHTML = '复制成功'
      document.body.appendChild(eleTips)
      // 事件
      eleTips.addEventListener('animationend', function() {
        eleTips.parentNode.removeChild(eleTips)
      })

      eleTips.style.left = (event.pageX - eleTips.clientWidth / 2) + 'px'
      eleTips.style.top = (event.pageY - eleTips.clientHeight) + 'px'
    })
  })

  var strStyle = '.text-popup { animation: textPopup 1s both; -ms-transform: translateY(-20px); color: #01cf97; user-select: none; white-space: nowrap; position: absolute; z-index: 99; }@keyframes textPopup {0%, 100% { opacity: 0; } 5% { opacity: 1; } 100% { transform: translateY(-50px); }}'

  var eleStyle = document.querySelector('#popupStyle')
  if (!eleStyle) {
    eleStyle = document.createElement('style')
    eleStyle.id = 'popupStyle'
    eleStyle.innerHTML = strStyle
    document.head.appendChild(eleStyle)
  }
}


onMounted (() => {
  copyText(btn.value, location.href, function (text) {
    console.log(location.href)
    console.log('复制成功：' + text)
  })
  copyText(btn2.value, output.value, function (text) {
    console.log('复制成功：' + text)
  })
})
const btnClick = () => {
  copyText(null, 'CSS demo', function (text) {
    console.log('复制成功：' + text)
  })
  // 改变按钮状态
  btn3.value.setAttribute('type', 'success')
}
</script>

<template>
  <p>
    <button ref="btn" type="primary" is="ui-button">复制当前网址</button>
    <button ref="btn2" type="primary" is="ui-button">复制输入框里面的内容</button></p>
  <p>
    <textarea ref="output" cols="60" rows="5" placeholder="用来粘贴测试" is="ui-textarea"></textarea>
  </p>

  <p>直接复制内容：<button ref="btn3" @click="btnClick" type="primary" is="ui-button">不设置按钮参数</button></p>

  <pre>

</pre>
</template>

<style scoped lang="scss">
:root {
  /* 基础颜色变量 */
  --ui-blue: #2a80eb;
  --ui-dark: #4c5161;
  --ui-white: #ffffff;
  --ui-green: #1cad70;
  --ui-orange: #f59b00;
  --ui-red: #eb4646;
  /* 边框颜色 */
  --ui-border: #d0d0d5;
  /* 圆角变量 */
  --ui-radius: 4px;
  /* 基础字号 */
  --ui-font: 14px;
  /* 动画时间 */
  --ui-animate-time: .2s;
  /* 基本尺寸单元 */
  --ui-line-height: 20px;
  --ui-component-height: 40px;
}

/* button基础变量 */
:root {
  --ui-button-height: var(--ui-component-height, 40px);
  --ui-button-line-height: var(--ui-line-height, 20px);
  --ui-button-color: var(--ui-dark, #4c5161);
  --ui-button-loading-img: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M512 1024q-104 0-199-40-92-39-163-110T40 711Q0 616 0 512q0-15 10.5-25.5T36 476t25.5 10.5T72 512q0 90 35 171 33 79 94 140t140 95q81 34 171 34t171-35q79-33 140-94t95-140q34-81 34-171t-35-171q-33-79-94-140t-140-95q-81-34-171-34-15 0-25.5-10.5T476 36t10.5-25.5T512 0q104 0 199 40 92 39 163 110t110 163q40 95 40 199t-40 199q-39 92-110 163T711 984q-95 40-199 40z' fill='%232a80eb'/%3E%3C/svg%3E") no-repeat;
}

.ui-button,
[is="ui-button"] {
  display: inline-block;
  line-height: var(--ui-button-line-height);
  font-size: var(--ui-font, 14px);
  text-align: center;
  color: var(--ui-white, #fff);
  border-radius: var(--ui-radius, 4px);
  border: 1px solid var(--ui-button-color);
  padding: calc((var(--ui-button-height) - var(--ui-button-line-height) - 2px) / 2) calc(var(--ui-button-height) / 2.5);
  min-width: 80px;
  background: var(--ui-button-color) no-repeat center;
  text-decoration: none;
  box-sizing: border-box;
  transition: border-color var(--ui-animate-time, .2s), box-shadow var(--ui-animate-time, .2s), opacity var(--ui-animate-time, .2s);
  fill: currentColor;
  font-family: inherit;
  cursor: pointer;
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  .ui-button,
  [is="ui-button"] {
    transition: none;
  }
}

.ui-button[width="100%"],
[is="ui-button"][width="100%"] {
  width: 100%;
}

div.ui-button,
div[is="ui-button"] {
  display: block;
}

/* Chrome/Firefox的outline会由Keyboard.js帮忙呈现 */
@supports (-webkit-mask: none) {
  button,
  [type="button"],
  [type="submit"],
  [tabindex] {
    outline: 0 none;
  }
}
::-moz-focus-inner {
  border: 0;
}

.ui-button:hover,
[is="ui-button"]:hover {
  color: var(--ui-white, #fff);
  text-decoration: none;
}
.ui-button:not(.disabled):not(.loading):not(:disabled):hover,
[is="ui-button"]:not(.disabled):not(.loading):not(:disabled):hover  {
  filter: brightness(1.05);
}

.ui-button:not(.disabled):not(.loading):active,
[is="ui-button"]:not(.disabled):not(.loading):active {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1),
  inset 0 0 0 100px rgba(0, 0, 0, 0.1);
}
.ui-button[type="normal"],
.ui-button[data-type="normal"],
[is="ui-button"][type="normal"],
[is="ui-button"][data-type="normal"] {
  --ui-button-color: var(--ui-white, #fff);
  color: var(--ui-dark, #4c5161);
  border-color: var(--ui-border);
}

/* primary button */
.ui-button[data-type="primary"],
.ui-button[data-type="remind"],
.ui-button[type="primary"],
.ui-button[type="remind"],
[is="ui-button"][data-type="primary"],
[is="ui-button"][data-type="remind"],
[is="ui-button"][type="primary"],
[is="ui-button"][type="remind"] {
  --ui-button-color: var(--ui-blue, #2a80eb);
}

/* success button */
.ui-button[data-type="success"],
.ui-button[type="success"],
[is="ui-button"][data-type="success"],
[is="ui-button"][type="success"] {
  --ui-button-color: var(--ui-green, #1cad70);
}

/* warning button */
.ui-button[data-type^="warn"],
.ui-button[type^="warn"],
[is="ui-button"][data-type^="warn"],
[is="ui-button"][type^="warn"] {
  --ui-button-color: var(--ui-orange, #f59b00);
}

/* danger button */
.ui-button[data-type="danger"],
.ui-button[data-type="error"],
.ui-button[type="danger"],
.ui-button[type="error"],
[is="ui-button"][data-type="danger"],
[is="ui-button"][data-type="error"],
[is="ui-button"][type="danger"],
[is="ui-button"][type="error"] {
  --ui-button-color: var(--ui-red, #eb4646);
}

/* error */
.ui-button[is-error],
[is="ui-button"][is-error] {
  border-color: var(--ui-red, #eb4646) !important;
}
</style>